<template>
  <div>
    <el-dialog v-dialogDrag title="编辑用户" :visible="editShow" width="40%" @close="dialogClose">
      <el-form ref="editForm" :model="formFileds" :rules="rules" label-width="auto">
        <el-form-item label="所属公司：" prop="companyId">
          <el-select v-model="formFileds.companyId" clearable filterable>
            <el-option v-for="(item, index) in companys" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位：" prop="roleId">
          <el-select v-model="formFileds.roleId" clearable>
            <el-option v-for="(item, index) in roles" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话：" prop="phone">
          <el-input  v-model="formFileds.phone" style="width:45%"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="remark">
          <el-input type="textarea" :rows="2" v-model="formFileds.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" class="pull-right margin-l-25">确定
          </el-button>
          <el-button @click="dialogClose" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { updateUser, getRoles } from "@/api/user/userManage";
import { selectAll } from "@/api/systemManage/enterpriseMaage";
export default {
  props: {
    editShow: {
      type: Boolean
    },
    record: {
      type: Object,
    },
  },
  data () {
    return {
      roles: [],
      companys: [],
      formFileds: {},
      rules: {
        role: [
          {
            required: true,
            message: "请选择角色",
            trigger: "change,blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "备注",
            trigger: "blur",
          },
        ],
      },
    };

  },
  methods: {
    dialogClose () {
      this.$emit('dialogClose')
    },
    submitForm () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$delete(this.formFileds, "createTime");
          if (this.formFileds.status == true) {
            this.formFileds.status = 0;
          } else {
            this.formFileds.status = 1;
          }
          updateUser(this.formFileds).then((res) => {
            this.$emit("close");
            this.$emit('dialogClose');
          });
        } else {
          return;
        }
      });
    },
    getCompany () {
      selectAll().then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          this.companys.push({
            label: res.data[i].companyName,
            value: res.data[i].id,

          });
        }
      });
    },
    getRoles () {
      getRoles().then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          this.roles.push({
            label: res.data[i].name,
            value: res.data[i].id,
          });
        }
      });
    }
  },

  mounted () {
    this.formFileds = Object.assign({}, this.record);
    this.getCompany();
    this.getRoles();
  },
}

</script>

<style>

</style>
